import React, { Component } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import {IconFont } from 'enoad-common/src/index';

import { BProps, BState, BaseComponent } from "../../index";

interface IProps extends BProps {
  itemClick: (height: number, item: any) => void;
  item: any;
}

interface IState extends BState {
  isLoading: boolean;
}

export default class SortLayout extends Component<IProps, IState> {
  layout: any;
  constructor(props: IProps) {
    super(props);
  }

  onItemPress() {
    if (this.props.itemClick && this.layout) {
      this.layout.measure((ox, oy, width, height, px, py) => {
        this.props.itemClick(py, this.props.item);
      });
    }
  }

  renderLayout() {
    return (
      <TouchableOpacity
        style={{
          flexDirection: "row",
          backgroundColor: "white",
          alignItems: "center",
          justifyContent: "center",
          paddingLeft: 10,
          flex: 1,
        }}
        onPress={() => {
          this.onItemPress();
        }}
      >
        <Text style={{ fontSize: 11, padding: 5, color: "#444D5C" }}>
          {this.props.item[0] && this.props.item[0].label}
        </Text>
        <IconFont name={"xiala"} size={6} color={"#444D5C"} />
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View
        ref={(ref) => (this.layout = ref)}
        style={{ flexDirection: "column", backgroundColor: "#FFFFFF" }}
      >
        {this.renderLayout()}
      </View>
    );
  }
}
